﻿<!--
  Copyright (c) Microsoft Corporation. All rights reserved.
  Licensed under the MIT License.
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
    <script src="./renderer.js" ></script>
    <title>LiH Simulation Demo</title>
    <style>
      .chart-container {
        position: absolute;
        width: calc(100vw - 2em);
        height: calc(100vh - 6em);
        top: 5em;
        left: 1em;
        overflow-x: hidden;
        overflow-y: hidden;
      }

      .chart-heading {
        position: absolute;
        width: 100vw;
        top: 0;
        left: 0;
        text-align: center;

        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-weight: 300;
      }
    </style>
  </head>
  <body style="-webkit-app-region: drag">
      <h1 class="chart-heading">
          LiH Simulation Demo
      </h1>
    <div class="chart-container">
      <canvas id="chartCanvas"></canvas>
    </div>

    <script>
      "use strict"

      var plotData = [];

      var ctx = document.getElementById("chartCanvas").getContext("2d");
      var chart = new Chart(ctx, {
        type: 'scatter',
        data: {
          datasets: [
              {
              showLine: false,
              label: 'Estimated',
              data: [],
              fill: false,
              borderColor: '#ff0000'
            },

              {
              showLine: true,
              label: '|G⟩',
              data: [],
              fill: false
            },

              {
              showLine: true,
              label: '|E1⟩',
              data: [],
              fill: false
            },

              {
              showLine: true,
              label: '|E2⟩',
              data: [],
              fill: false
            },

              {
              showLine: true,
              label: '|E3⟩',
              data: [],
              fill: false
            },

              {
              showLine: true,
              label: '|E4⟩',
              data: [],
              fill: false
            },

              {
              showLine: true,
              label: '|E5⟩',
              data: [],
              fill: false
            }
          ]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          defaultFontFamily: "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif",
          scales: {
            xAxes: [{
              scaleLabel: {
                display: true,
                labelString: 'Bond Length'
              }
            }],
            yAxes: [{
              scaleLabel: {
                display: true,
                labelString: 'Energy'
              }
            }]
          }
        }
      })

      renderer.connectToSimulationServer((data) => {
        plotData.push(data);
          if (data.source == "|G>") {
              chart.data.datasets.forEach((dataset) => {
                  if (dataset.label == "|G⟩") {
                      var point = { x: data.bondLength, y: data.theoreticalEnergy }
                      dataset.data.push(point)
                  } 
              })
              
          }
          else if (data.source == "|E1>") {
              chart.data.datasets.forEach((dataset) => {
                  if (dataset.label == "|E1⟩") {
                      var point = { x: data.bondLength, y: data.theoreticalEnergy }
                      dataset.data.push(point)
                  }
              })

          }
          else if (data.source == "|E2>") {
              chart.data.datasets.forEach((dataset) => {
                  if (dataset.label == "|E2⟩") {
                      var point = { x: data.bondLength, y: data.theoreticalEnergy }
                      dataset.data.push(point)
                  }
              })

          }
          else if (data.source == "|E3>") {
              chart.data.datasets.forEach((dataset) => {
                  if (dataset.label == "|E3⟩") {
                      var point = { x: data.bondLength, y: data.theoreticalEnergy }
                      dataset.data.push(point)
                  }
              })

          }
          else if (data.source == "|E4>") {
              chart.data.datasets.forEach((dataset) => {
                  if (dataset.label == "|E4⟩") {
                      var point = { x: data.bondLength, y: data.theoreticalEnergy }
                      dataset.data.push(point)
                  }
              })

          }
          else if (data.source == "|E5>") {
              chart.data.datasets.forEach((dataset) => {
                  if (dataset.label == "|E5⟩") {
                      var point = { x: data.bondLength, y: data.theoreticalEnergy }
                      dataset.data.push(point)
                  }
              })

          }
          else if (data.source == "simulation") {
              chart.data.datasets.forEach((dataset) => {
                  if (dataset.label == "Estimated") {
                      var point = { x: data.bondLength, y: data.estEnergy }
                      dataset.data.push(point)
                  }
              })

          }
          chart.update()
      });
    </script>
  </body>
</html>
